<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        canvas {
            border: 1px solid red;
        }
    </style>
</head>
<body onload="draw()">
    <canvas id="mycanvas" width="150" height="150">
        test canvas
    </canvas>
    <script>
        function draw() {
            const canvasId = document.getElementById("mycanvas");
            if (canvasId.getContext) {
                const ctx = canvasId.getContext("2d");
                ctx.beginPath();
                ctx.moveTo(75, 50);
                ctx.lineTo(100, 75);
                ctx.lineTo(100, 25);
                // fill()函数会自动闭合路径
                ctx.fill();
                // stroke()函数不会自动闭合路径，所以需要closePath()
                // ctx.closePath();
                // ctx.stroke();
            }
        }
    </script>
</body>
</html>